import React, { memo } from 'react'
import { useRoutes } from 'react-router-dom'

import routes from './router'
import LayoutHeader from './components/layout-header'
import LayoutFooter from './components/layout-footer'

const App = memo(() => {
  return (
    <div className='layout'>
      {/* 顶部菜单 */}
      <LayoutHeader></LayoutHeader>
      {/* 页面内容区域 */}
      <main className='layout-main'>
        { useRoutes(routes) }
      </main>
      {/* 底部footer */}
      <LayoutFooter></LayoutFooter>
    </div>
  )
})

export default App